<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'

export default {
  props: {
    className: {
      type: String,
      default: 'score-chart'
    },
    id: {
      type: String,
      default: 'score-chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    data: {
      type: Array
    },
    title: {
      type: String,
      default: '近30天走势'
    },
    queryTime: {
      type: String,
      default: '近三天'
    }
  },
  data() {
    return {
      chart: null,
      // 第一层颜色
      levelColor1: ['#D8D8D8', '#006EFF'],
      // 第二层颜色
      levelColor2: ['rgba(255,255,255,0)', '#96DCFF', '#0BACFF', '#3946FF', '#866CFF', '#65E097']
    }
  },
  created() {},
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  computed: {
    // 计算所有车辆
    countAll() {
      return this.data.reduce((total, item) => total + parseInt(item.value), 0)
    },
    // 计算超重
    countOverload() {
      return this.data.slice(1).reduce((total, item) => total + parseInt(item.value), 0)
    },
    // 第一层数据
    levelData1() {
      return [
        ...this.data.slice(0, 1),
        {
          name: '超重',
          value: this.countOverload
        }
      ]
    },
    // 第一层数据处理
    finalData1() {
      const arr = _.cloneDeep(this.levelData1)
      return arr.map((item, index) => {
        item.itemStyle = { color: this.levelColor1[index] }
        return item
      })
    },
    // 第二层数据
    finalData2() {
      return this.data.map((item, index) => {
        if (index !== 0) {
          item.name = ''
          item.name = `${item.originName} 超重数：${item.value}  平均超重幅度：${item.overloadAver}%`
        }
        item.itemStyle = { color: this.levelColor2[index] }
        return item
      })
    }
  },
  methods: {
    initChart() {
      const that = this
      this.chart = echarts.init(document.getElementById(this.id))
      // console.log('---', that.countAll)
      // console.log('that.countOverload', that.countOverload)
      // console.log('that.finalData1', that.finalData1)
      // console.log('that.finalData2', that.finalData2)
      const optinos = {
        title: [
          {
            text: that.title,
            textStyle: {
              fontSize: 18
            },
            left: 10,
            top: 10
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 250,
            top: 10,
            style: {
              text: this.queryTime,
              textAlign: 'center',
              fontSize: 14
            }
          },
          {
            type: 'text',
            left: 305,
            top: 110,
            style: {
              text: `超重总数\n ${that.countOverload}`,
              textAlign: 'center',
              fontSize: 14
            }
          },
          {
            type: 'text',
            left: 5,
            top: 160,
            style: {
              text: '车辆总数:' + that.countAll,
              textAlign: 'center',
              fontSize: 14
            }
          }
        ],
        legend: {
          left: 'left',
          top: 'bottom',
          orient: 'vertical',
          textStyle: {
            fontSize: 14
          }
          // data: ['未超重总数', '超重总数', '2轴', '3轴', '4轴', '5轴', '6轴及以上']
        },
        // color: ['#D8D8D8', '#006EFF', '#65E097', '#96DCFF', '#0BACFF', '#3946FF', '#866CFF'],
        series: [
          {
            type: 'pie',
            center: [330, 120],
            radius: [55, 80],
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '16',
                fontWeight: 'bold',
                formatter: '{b}\n{c}'
              }
            },
            clockwise: false,
            data: that.finalData1
          },
          {
            type: 'pie',
            center: [330, 120],
            radius: [80, 120],
            roseType: 'radius',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '16',
                fontWeight: 'bold',
                formatter: '{b}\n{d}%'
              }
            },
            clockwise: false,
            data: that.finalData2
          }
        ],
        toolbox: {
          // x: 'right',
          // y: 'bottom',
          right: 20,
          bottom: 0,
          feature: {
            saveAsImage: {}
          }
        }
      }
      this.chart.setOption(optinos)
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>
